<template>
  <div class="container">
    <div class="login">
    </div>
    <!--登录中间块-->
    <div class="login-mid">
      <!--
      @date:2024-10-30
      新版本方式
      初次加载的时候，需要加载资源，确保你网络正常
      -->
      <div class="login-mid-mid" ref="effet"></div>

    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      // 新增错误状态标志
      hasError: false,
      videoWidth: 600,
      videoHeight: 600,
      msg:'',
      faceImgState:false,
      faceOption:{},
      synth: null, // 语音合成实例
      // 定义延迟常量
      RESTART_DELAY: 1500
    };
  },
  mounted() {
    /**
     * 新版本如：2024-10-30更新
     * 官网地址：https://faceeffet.com/
     */
    // 新版本调用方式
    // 新版本一共4种模式，人脸登录，人脸添加，睡眠检查，人脸打卡，更多有意思的参数可查看官网
    // 初始化语音合成
    if ('speechSynthesis' in window) {
      this.synth = window.speechSynthesis;
    }

    this.$faceEffet.init({
      el: this.$refs.effet,
      type:'clockIn',
      callBack: this.callBack
    })

  },
  beforeDestroy(){
    if (this.$faceEffet){
      // 当页面销毁时，需要关闭
      this.$faceEffet.close();
    }
  },
  methods: {
    // 语音朗读方法
    speak(text) {
      if (this.synth && !this.synth.speaking) {
        const utterance = new SpeechSynthesisUtterance(text);
        // 设置中文语音（需要浏览器支持）
        const voices = this.synth.getVoices();
        const chineseVoice = voices.find((v) => v.lang === 'zh-CN');
        if (chineseVoice) utterance.voice = chineseVoice;

        utterance.rate = 1; // 语速
        utterance.pitch = 1; // 音高
        this.synth.speak(utterance);
      }
    },

    // 统一错误处理方法
    handleError(message = '无法识别人脸，请稍后重试') {
      if (!this.hasError) {
        this.hasError = true;
        this.speak(message);
        this.$message.error(message);
        setTimeout(() => {
          // 检查 this.$faceEffet 是否存在
          if (this.$faceEffet) {
            this.$faceEffet.restart();
          }
          this.hasError = false; // 重置状态
        }, this.RESTART_DELAY);
      }
    },
    // 新版本调用后端
    callBack(data){
      if (data.progressMessage === 'success'){ // 判断阶段是否成功
        let array = data.base64Array;
        if (!data.base64Array || data.base64Array.length === 0){
          this.handleError();
          return;
        }
        Promise.all(data.base64Array)
            .then((base64Strings) => {
              this.$http.post('/face/vef', { imageBase: base64Strings[0] })
                  .then(res => {
                    if (res.code === 200) {
                      this.$faceEffet.close();
                      localStorage.setItem("face_token", res.token);
                      localStorage.setItem("username", res.name);
                      this.speak(res.msg);
                      this.$message.success(res.msg);
                      this.$faceEffet.restart();
                      // if(res.name=='管理员'){
                      //   this.$router.push("/home")
                      // }
                    } else {
                      this.handleError(res.msg);
                    }
                  })
                  .catch(error => {
                    this.handleError(error);
                  });
            })
            .catch(error => {
              this.handleError();
            });
      }
    },

  },
};
</script>
<style>
@import "./index.css";
</style>
